<template>

    <headerTitle title="确认订单"></headerTitle>
    <!-- 订单信息部分 -->
    
    <div class="order-info" @click="router.push({name:'addressListPage',query:{id:cart.business.businessId}})" v-if="getActiveAddress">
        <h5>订单配送至：</h5>
        <div class="order-info-address">
            <p>{{ getActiveAddress.address }}</p>
            <i class="fa fa-angle-right"></i>
        </div>
        <p>{{ getActiveAddress.name + (getActiveAddress.sex == 0 ? "先生" : "女士") + " " + getActiveAddress.phone }}</p>
    </div>
    <div v-else class="none-address" @click="router.push({name:'addressListPage',query:{id:cart.business.businessId}})">
        <i class="fa fa-plus-circle"></i>
        <span>点击添加地址</span>
    </div>

    <h3>{{ cart.business.businessName }}</h3>
    <!-- 订单明细部分 -->
    <ul class="order-detailed">
        <li v-for="food in cart.foods" :key="food">
            <div class="order-detailed-left">
                <img :src="food.foodImg">
                <p>{{ food.foodName }} x {{ food.quantity }}</p>
            </div>
            <p>&#165;{{ food.foodPrice }}</p>
        </li>
    </ul>
    <div class="order-deliveryfee">
        <p>配送费</p>
        <p>&#165;{{ cart.business.deliveryPrice }}</p>
    </div>

    <!-- 合计部分 -->
    <div class="total">
        <div class="total-left">&#165;{{ getTotalPrice }}</div>
        <div class="total-right" @click="createOrder" v-if="cart.business.starPrice<getTotalPrice">
            去支付
        </div>

        <!-- 不够起送费 -->
        <div class="total-right" v-else>&#165;{{ cart.business.starPrice }}起送</div>
    </div>
</template>

<script setup>
import headerTitle from '@/components/headerTitle.vue';
import { useRouter, useRoute } from 'vue-router'
import { ref, computed } from 'vue'
import { getCartRequest, getDeliveryAddressListRequest ,createOrderRequest} from '@/js/request';
let router = useRouter()
let route = useRoute()
let cart = ref({ business: {} })
let addressList = ref([{address:null}])
let getActiveAddress = computed(() => {
    if(addressList.value.length==0){
        return null
    }
    if(route.query.addressIndex){
        return addressList.value[route.query.addressIndex]
    }
    return addressList.value[0]
})
let getTotalPrice = computed(() => {
    var sum = 0;
    if (cart.value.foods != null)
        cart.value.foods.forEach(element => {
            sum += element.quantity * element.foodPrice

        })
    return sum + cart.value.business.deliveryPrice
})
let createOrder=()=>{
    if(getActiveAddress.value){
        createOrderRequest((respon)=>{
        if(respon.data.code==200){
            router.replace({name:'paymentPage',query:{id:respon.data.detail}})
        }
    },cart.value.business.businessId,getActiveAddress.value.addressId,getTotalPrice.value)
    }else{
        alert("还未选择送货地址")
    }
    
}
getCartRequest(respon => {
    if (respon.data.code == 200) {
        cart.value = respon.data.detail
        if(cart.value.foods.length==0){
            alert("还未选购商品")
            router.replace({name:'businessInfoPage',query:{id:route.query.id}})
        }
    }
}, route.query.id)
getDeliveryAddressListRequest(respon => {
    if (respon.data.code == 200) {
        addressList.value = respon.data.detail
    }
})





</script>

<style lang="scss" scoped>
.button-logout {
        width: 100%;
        box-sizing: border-box;
        padding: 4vw 3vw 0 3vw;

        button {
            width: 100%;
            height: 10vw;
            font-size: 3.8vw;
            font-weight: 700;
            color: #fff;
            background-color: #38CA73;
            border-radius: 4px;

            border: none;
            outline: none;
        }
    }
/****************** 订单信息部分 ******************/
.order-info {
    width: 100%;
    margin-top: 12vw;
    background-color: #0097EF;
    box-sizing: border-box;
    padding: 2vw;
    color: #fff;
}

.order-info h5 {
    font-size: 3vw;
    font-weight: 300;
}

.order-info .order-info-address {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-weight: 700;
    user-select: none;
    cursor: pointer;
    margin: 1vw 0;
}

.order-info .order-info-address p {
    width: 90%;
    font-size: 5vw;
}

.order-info .order-info-address i {
    font-size: 6vw;
}

.order-info p {
    font-size: 3vw;
}

.none-address {
    width: 100%;
    margin-top: 12vw;
    background-color: #0097EF;
    box-sizing: border-box;
    padding: 2vw;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

h3 {
    box-sizing: border-box;
    padding: 3vw;
    font-size: 4vw;
    color: #666;
    border-bottom: solid 1px #DDD;
}

/****************** 订单明细部分 ******************/
.order-detailed {
    width: 100%;
}

.order-detailed li {
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-detailed li .order-detailed-left {
    display: flex;
    align-items: center;
}

.order-detailed li .order-detailed-left img {
    width: 10vw;
    height: 10vw;
}

.order-detailed li .order-detailed-left p {
    font-size: 3.5vw;
    margin-left: 3vw;
}

.order-detailed li p {
    font-size: 3.5vw;
}

.order-deliveryfee {
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3.5vw;
}

/****************** 订单合计部分 ******************/
.total {
    width: 100%;
    height: 14vw;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
}

.total .total-left {
    flex: 2;
    background-color: #505051;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 700;
    user-select: none;

    display: flex;
    justify-content: center;
    align-items: center;
}

 .total .total-right {
    flex: 1;
    background-color: #38CA73;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 700;
    user-select: none;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}
</style>